<template>
  <section>
    <div class="center-container">
      <section class="plant-row">
        <index-plant-1 :modelValue="plants.slice(0, 4)"></index-plant-1>
        <index-plant-2 :modelValue="plants.slice(4, 5)"></index-plant-2>
      </section>
      <index-plant-3 :modelValue="plants.slice(5, 6)"></index-plant-3>
      <section class="plant-row">
        <index-plant-4 :modelValue="plants.slice(6, 7)"></index-plant-4>
        <index-plant-5 :modelValue="plants.slice(7, 8)"></index-plant-5>
      </section>
      <index-plant-6 :modelValue="plants.slice(8, 9)"></index-plant-6>
    </div>
  </section>
</template>
  <script>
import ajax from "@/util/request";

import IndexPlant1 from "./index-plant1";
import IndexPlant2 from "./index-plant2";
import IndexPlant3 from "./index-plant3";
import IndexPlant4 from "./index-plant4";
import IndexPlant5 from "./index-plant5";
import IndexPlant6 from "./index-plant3";

export default {
  data() {
    return {
      plants: [],
    };
  },
  // 创建后，利用ajax加载数据
  created() {
    ajax("/plant/queryList", { t_cat_pk: 5 }).then(({ data }) => {
      if (data.status > 0) {
        this.plants = data.result_data;
      }
    });
  },
  components: {
    IndexPlant1,
    IndexPlant2,
    IndexPlant3,
    IndexPlant4,
    IndexPlant5,
    IndexPlant6,
  },
};
</script>
  
  <style scoped>
.plant-row {
  display: flex;
  padding: 10px 0px;
}
</style>